<template>
  <div class="docs">
    <div class="title">
      <span>文书列表</span>
    </div>
    <div class="doc">
      <!-- <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1" v-for="(value, index) in docList" :key="index" :name="index+1" :title="value" class="doc-item" @click.native="clickDocItem(value)">
          <div>与现实生活一致</div>
          <div>在界面中一致</div>
        </el-collapse-item>
      </el-collapse> -->
      <div v-for="(value, index) in docList" :key="index" class="doc-item" @click="clickDocItem(value)">
        {{value}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "doc-list",
  props:['docList', 'showDoc'],
  data () {
    return {
      active:null,
      caseDetail:null,
      activeNames:[]
    };
  },
  methods:{
    clickDocItem(value){
      if(this.showDoc){
        this.showDoc(value);
      }
    },
    handleChange(val) {
      // console.log(val);
    }
  }
}

</script>
<style lang="scss">
.docs{
  position: absolute;
  top: 130px;
  left:40px;
  width:200px;
  background-color:#f5f5f5;
  .title{
    background: transparent;
  }
  .doc-item{
    padding:10px 20px;
    font-size: 16px;
  }
  .doc-item:hover{
    background-color:#95c4ec;
    cursor: pointer;
  }
  .active{
    background-color:#95c4ec;
  }
}
</style>